import React, { useEffect, useState } from 'react';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { Button, Image, Modal, Skeleton, Switch } from 'antd';
import { getAdverDetail } from '@/services/adver';
import { UploadOutlined } from '@ant-design/icons';
import AliyunOssUpdate from '@/components/AliyunOssUpdate';

const HandleFunc = (props) => {
  //从props里获取到父组件传过来的数据
  const { showModal, editId, visible, AddOrEdit } = props;
  // 初始化数据列表 定义设置状态
  const [initialValues, setInitialValues] = useState(undefined);

  const [formObj] = ProForm.useForm();
  //
  const setIconKey = (fileKey) => formObj.setFieldsValue({ 'img': fileKey });



  //生命周期  判断uid是不是真 是针灸获取数据 set
  useEffect(async () => {
    if (editId) {
      const res = await getAdverDetail(editId);
      if (res.status === undefined) {
        setInitialValues(res.data);
      }
    }
  }, []);

  return (
    <div>
      <Modal
        title={editId ? '编辑广告' : '添加广告'}
        visible={visible}
        onCancel={() => showModal(false)}
        footer={false}
        destroyOnClose={true}
      >
        {initialValues == undefined && editId != undefined ?
          <Skeleton active />
         :
          <ProForm initialValues={initialValues} onFinish={(data) => AddOrEdit(data, editId)}>
            <ProFormText
              name="title"
              label="广告名"
              placeholder="请输入广告名"
              rules={[
                {
                  required: true,
                  message: '请输入广告名称!',
                },
              ]}
            />
            <ProFormText
              name="url"
              label="广告地址"
              placeholder="请输入广告地址"
              rules={[
                {
                  required: true,
                  message: '请输入广告地址!',
                },
              ]}
            />
            {editId !== undefined ? (
              ''
            ) : (
              <ProForm.Item
                name="img"
                label="广告图片"
                rules={[
                  {
                    required: true,
                    message: '请输入关于我们',
                  },
                ]}
              >
                <div>
                  <AliyunOssUpdate accept="image/*" setIconKey={setIconKey}>
                    <Button icon={<UploadOutlined />}>点击上传</Button>
                  </AliyunOssUpdate>
                </div>
              </ProForm.Item>
            )}
            {
              editId === undefined ? '' :
                <ProForm.Item
                  name="img"
                  label="广告图片"
                  rules={[
                    {
                      required: true,
                      message: '请输入关于我们',
                    },
                  ]}
                >
                  <div>
                    <AliyunOssUpdate accept="image/*" setIconKey={setIconKey}>
                      <Button icon={<UploadOutlined />}>点击上传</Button>
                    </AliyunOssUpdate>
                    {initialValues.img != undefined ? <Image width={100} src={initialValues.img_url} /> : ''}
                  </div>
                </ProForm.Item>
            }
            <ProForm.Item name="status">
              <Switch
                checkedChildren="开启"
                unCheckedChildren="关闭"
                name="status"
                label="广告状态"
                defaultChecked={true}
              />
            </ProForm.Item>
          </ProForm>
        }
      </Modal>
    </div>
  );
};

export default HandleFunc;
